<template>
  <div>
    <router-view></router-view>
    <tabbar style="position: fixed">
      <tabbar-item v-for="(item,index) in tableBarItem" @click.native="changeTarbleBar(index,item.url)" :key="index">
        <img slot="icon" :src="item.selected?item.selectedImg:item.defaultImg">
        <span slot="label">{{item.text}}</span>
      </tabbar-item>
    </tabbar>
  </div>
</template>

<script>
  import {
    Panel,
    Swiper,
    SwiperItem,
    Search,
    ButtonTab,
    ButtonTabItem,
    Tabbar,
    TabbarItem,
    Group,
    Cell,
    Scroller,
    Grid,
    GridItem
  } from 'vux'

  export default {
    components: {
      Search,
      ButtonTab,
      ButtonTabItem,
      Tabbar,
      TabbarItem,
      Group,
      Cell,
      Swiper,
      SwiperItem,
      Panel,
      Scroller,
      Grid,
      GridItem
    },
    data() {
      return {
        type: "1",
        tableBarItem: [{
          defaultImg: "http://ouu3ukac5.bkt.clouddn.com/home.png",
          text: "首页",
          selectedImg: "http://ouu3ukac5.bkt.clouddn.com/home2.png",
          selected: true,
          url: "/index"
        },
          {
            text: "聊天",
            defaultImg: "http://ouu3ukac5.bkt.clouddn.com/cmmunicate.png",
            selectedImg: "http://ouu3ukac5.bkt.clouddn.com/cmmunicate2.png",
            selected: false,
            url: "/view"
          },
          {
            text: "个人中心",
            defaultImg: "http://ouu3ukac5.bkt.clouddn.com/me.png",
            selectedImg: "http://ouu3ukac5.bkt.clouddn.com/me2.png",
            selected: false,
            url: "/personal"
          }
        ],
        searchContent: "",
        results: [],
        autoFixed: false,
        paperShow: true,
        videoShow: false,
      }
    },
    methods: {
      changeTarbleBar(index, url) {

        this.tableBarItem = this.tableBarItem.map((item) => {
          item.selected = false
          return item
        })

        this.tableBarItem[index].selected = true
        this.$router.push({path: url})

      },
      onCancel: function () {
        this.searchContent = ""
      },
      onSubmit: function () {
      },
      resultClick: function () {

      },
      onImgError: function () {

      },
      showPaper() {
        this.paperShow = true
        this.videoShow = false
      },
      showVideo() {
        this.paperShow = false
        this.videoShow = true
      }
    }
  }

</script>

<style>
  .button-tab-class {
    position: relative;
    margin-top: 30px;
  }

  .movie-avatar {
    display: block;
    margin: 0 auto;
    width: 150px;
    height: 150px;
  }

  .movie-content-wrapper {
    position: relative;
    display: flex;
    margin-top: 15px;
  }

  .movie-content-wrapper .movie-content {
    flex: 0 0 50%;
  }

  .view-wrapper {
    position: relative;
    display: flex;
    width: 100%;
    color: rgb(100, 100, 100);
    margin-top: 10px;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  .view-wrapper div {
    flex: auto;
    height: 20px;
    line-height: 20px;
  }

  .viewIcon {
    vertical-align: top;
    width: 20px;
    height: 20px;
  }

  .praiseIcon {
    vertical-align: top;
    width: 20px;
    height: 20px;
  }

  .movie-title {
    font-size: 22px;
    text-align: center;
    height: 30px;
    line-height: 30px;
    margin-bottom: 6px;
  }

  .viewText {
    position: relative;
    display: inline-block;
  }
</style>
